import React, { Component } from 'react'

export default class Test extends Component {
    render() {
        return (
            <div>
                <h1>test测试页面</h1>
            </div>
        )
    }
}

// // 【index.js】项目入口
// import {createStore , combineReducers} from 'redux';
// import {Provider} from 'react-redux';

// const initSate = [];
// const ADD_TODO = 'ADD_TODO';
// const TodoReducer = (state=initSate,action) => {
//     switch(action.type){
//         case ADD_TODO:
//             let newState = [...state]  // {...state} [...state]
//             newState.push(action.payload);
//             return newState;
//         default:
//             return state;
//     }
// }
// // function creteaADD_TODO(payload){    // 生成action
// //     return {type:ADD_TODO,payload:payload};
// // }
// // 合并reducer
// const reducer = combineReducers({
//     // 相当于State上的属性
//     listData0:TodoReducer
// })
// const store = createStore(reducer,{listData:[]});

// ReactDOM.render(
//     <Provider store={store}>
//         <App></App>
//     </Provider>,
//     document.getElementById('root')
// )

// 【Test.js】
import {connect} from 'react-redux';

// mapStateToProps函数——》将state中的值映射到props上
// 返回一个对象 
const mapStateToProps = (state,props) => {
    return {
        // Test组建中，可以使用this.props.listData
        listData:state.listData0
    }
}
// mapDispatchToprops函数——》将state中的dispatch映射到props上
// 返回一个对象，对象是一个方法——》dispatch一个action
const mapDispatchToprops = (dispatch,props) => {
    return {
        // 将此方法映射到this.props上
        // 一：
        // 此方法调用dispatch一个action
        addTodo:function(val){
            // 此处Api/逻辑判断，最终dispatch(action,relpayload)
            dispatch({type:'ADD_TODO',payload:val})
        },
        /**
         * 二：
         * addTodo 在reducer中定义，在其中触发dispatch
         * import {addTodo} from './addreducer.js'
           addTodo:addTodo
        */
    }
}

// export default connect(mapStateToProps,mapDispatchToprops)(TodoUI);